<?php
$this->load->helper ( "url" );
?>
<html>
<head>
<title>My Facebook App</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link
	href='<?php echo base_url()."style/jquery-ui-1.11.1/jquery-ui.css"?>'
	rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src='<?php echo base_url()."style/jquery-ui-1.11.1/external/jquery/jquery.js";?>'>
</script>
<script type="text/javascript"
	src='<?php echo base_url()."style/jquery-ui-1.11.1/jquery-ui.js";?>'>
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src=<?php echo base_url()."style/autocomplete/src/jquery.tokeninput.js"?>></script>

<link rel="stylesheet" href=<?php echo base_url()."style/autocomplete/styles/token-input.css"?> type="text/css" />
<link rel="stylesheet" href=<?php echo base_url()."style/autocomplete/styles/token-input-facebook.css"?> type="text/css" />

<!-- spinner-image for upload -->
<script type="text/javascript" src='<?php echo base_url()."style/imageSpinner/script.js"?>'></script>
<link rel="stylesheet" type="text/css" href='<?php echo base_url()."style/imageSpinner/style.css"?>'>

<!-- visualization -->
<script type="text/javascript" src='<?php echo base_url()."style/visualization/protovis.js"?>'></script>


<style type="text/css">
body{
	margin:0;
	background: #E9EAEE;
}
#ddtabs1{
	position: fixed;
	background: #44619B;
	width: 100%;
	height: 40px;
}
input[name="message"] {
	display: none;
}

input[name="imagePath"] {
	display: none;
}

input[name="allow-friend"] {
	display: none;
}

label[for="allow-friend"] {
	display: none;
}

input[name="deny-friend"] {
	display: none;
}

label[for="deny-friend"] {
	display: none;
}

.Post-preview {
	clear: both;
	display: block;
}

#ddtabs1 ul{
		margin-top: 10px;
	}
#post-info{
	float: left;
	width: 50%;
}
#FacebookLogin a{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 40px;
	padding-bottom: 0;
 	margin-bottom:0;
}
#FacebookLogin img{
	width: 30px;
	height: 30px;
}
.Post-Preview{
	margin-top: 41px;
}

.tag-item{
	background: #61BFED;
}

textarea{
	resize: none;
}

.viewer:hover{
	color: #6F7FE8;
	font-weight: bold;
}

#visualization{
	margin-top: 41px;
	width: 45%;
	float: right;
}
</style>



<link rel="stylesheet" type="text/css"
	href='<?php echo base_url()."style/ddtabmenu/ddtabmenufiles/ddtabmenu.css"; ?>'></link>

<!-- When CUSTOM is selected show label and input for allow-friend and deny-friend -->

<script>
	$(document).ready(function(){
		var funcType = <?php echo $funcType?>;
		switch (funcType) {
			case 0:
				document.getElementById("watermark").className="current"
				break;
			case 1:
				document.getElementById("twoimages").className="current"
				break;
			case 2:
				document.getElementById("frames").className="current"
				break;
			case 3:
				document.getElementById("cartoon").className="current"
				break;
			case 4:
				document.getElementById("oldage").className="current"
				break;
			case 5:
				document.getElementById("funnyeffect").className="current"
				break;
			case 6:
				document.getElementById("sketch").className="current"
				break;
		}
	});
	
</script>

<style type="text/css">
.list_item_container {
	width: 300px;
	height: 60px;
	padding: 5px 0;
}

.image {
	width: 60px;
	height: 60px;
	margin-right: 10px;
	float: left;
}

.description {
	font-style: italic;
	font-size: 0.8em;
	color: gray;
}


.everyone{
	width: 25px;
	height: 25px;
	background:#000000 url(<?php echo base_url()."images/custom_public_friend/public.png"?>) no-repeat;
	display: block;
}

.friends{
	width: 25px;
	height: 25px;
	background:#000000 url(<?php echo base_url()."images/custom_public_friend/friend.png"?>) no-repeat;
	display: block;
}

.self{
	width: 25px;
	height: 25px;
	background:#000000 url(<?php echo base_url()."images/custom_public_friend/custom.png"?>) no-repeat;
	display: block;
}

</style>

	

</head>

<body>
	

	<div>
	<div id="ddtabs1" class="basictab">
		<ul>
			<li><a title="watermark your image" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionWatermark/Watermark")."'"?>
				rel="Watermark" id="watermark">Đóng dấu ảnh</a></li>
			<li><a title="add background to your images" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionTwoImages/TwoImages")."'"?>
				rel="TwoImages" id="twoimages">Ghép ảnh nền</a></li>
			<li><a title="beautiful frames for your pictures" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionFrame/Frame")."'"?>
				rel="Frames" id="frames">Khung ảnh</a></li>
			<li><a title="look like cartoon pictures" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionCartoon/Cartoon")."'"?>
				rel="Cartoon" id="cartoon">Ảnh hoạt hình</a></li>
			<!-- <li><a title="OLDAGE" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionIn20Years/In20Years")."'"?>
				rel="OldAge" id="oldage">OldAge</a></li> -->
			<li><a display="none"></a></li>
			<li><a title="make yourself looks like superman, ..." onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionFunnyEffect/FunnyEffect")."'"?>
				rel="FunnyEffect" id="funnyeffect">Hiệu ứng vui</a></li>
			<li><a title="make your picture in pencil" onclick="loadAjax();"
				href=<?php echo "'".base_url("index.php/FunctionSketch/Sketch")."'"?>
				rel="Sketch" id="sketch">Ảnh chì</a></li>
		</ul>

		<div id="FacebookLogin">
			<a
				href='<?php
				if (! isset ( $_SESSION ["userId"] ))
					echo "http://localhost/ImageProcessing/index.php/FacebookLogin/FacebookLogin";
				else if (strcmp ( $_SESSION ["userName"], "Anonymous" ) == 0)
					echo "http://localhost/ImageProcessing/index.php/FacebookLogin/FacebookLogin";
				else
					echo "http://facebook.com/me";
				?>'>
				<?php
				if (! isset ( $_SESSION ["userId"] )) {
					echo "<img src = ";
					echo base_url () . "/UserUploads/fb-login.jpg";
					echo "></img>";
				} else {
					if (strcmp ( $_SESSION ["userName"], "Anonymous" ) == 0) {
						echo "<img src = ";
						echo base_url () . "/UserUploads/fb-login.jpg";
						echo "></img>";
					} else {
						echo "<img src = ";
						echo $_SESSION["profilePicture"];
						echo "></img>";
						echo $_SESSION ["userName"];
						echo "<a class='logout' href=" . base_url ( "/index.php/FacebookLogout/FacebookLogout" ) . " style='padding-left:10px'>";
						echo "Đăng xuất";
						echo "</a>";
					}
				}
				?>	
			</a>
		</div>
	</div>
	<div id="post-info">
	<img alt="" class="Post-preview"
		src=<?php echo $imageUploadPath?>
		<?php
		$size = getimagesize ( $imageUploadPath ) ;
		$ratio = $size[0]/$size[1];
		$resize[0] = 640;
		$resize[1] = 640/$ratio;

		echo "width='".$resize [0]."'";
		echo "height='".$resize [1]."'";
		?>>
	<br>
	<label for="message">Tin nhắn:</label>
	<br>
	<textarea id="message" rows="5" cols="50" form="postToFacebook" name="message"></textarea>
	
	<form method="post"
		action=<?php echo base_url("/index.php/FacebookPost/FacebookPost/process?funcType=$funcType")?>
		id="postToFacebook">
		
		<input value=<?php echo $imageUploadPath?> name="imagePath">
		
		<div>
			<span class="tag">Nhập tên người bạn muốn đính kèm:</span>
			<input type="text" id="demo-input-facebook-theme" name="tagIdList" />
	        <script type="text/javascript">
	        $(document).ready(function() {
	            $("#demo-input-facebook-theme").tokenInput(
	                <?php echo $friendList?>
	            , {
	                theme: "facebook"
	            });
	        });
	        </script>
		</div>
		
		
		<input type="submit" value="Đăng lên Facebook">
	</form>
	</div>
	<div id="visualization">
		<?php 
			//always draw node level 0
			
		?>
	</div>
	</div>
	<div id="content">
		<div id="results"><!-- Results are displayed here --></div>
		<div id="fade"></div>
		<div id="modal">
			<img id="loader" src="<?php echo base_url()."style/imageSpinner/"?>images/loading.gif" />
		</div>
	</div>
	
	
	<script type="text/javascript+protovis">
		
		var onloadNodes = <?php echo $onloadNodes?>;
		var onloadLinks = <?php echo $onloadLinks?>;
		

        window.onload = renderImageFirst(onloadNodes, onloadLinks);

        function renderImage(mnodes, mlinks){

        	// document.getElementById("token-input-demo-input-facebook-theme").readOnly = true;
        	// document.getElementById("token-input-dropdown-facebook").disabled = true;

        	var oldOne = document.getElementById("canvasDraw");
        	if(oldOne != null) 
        		oldOne.remove();
        	var oldNotes = document.getElementById("notes");
        	if(oldNotes != null) 
        		oldNotes.remove();
            var w = 600,
            h = 600,
            colors = pv.Colors.category19();

            var vis = new pv.Panel()
                .width(w)
                .height(h)
                .fillStyle("white")
                .event("mousedown", pv.Behavior.pan())
                .event("mousewheel", pv.Behavior.zoom());
			//next time render
			renderImage.nodes.push(mnodes);
			renderImage.links.push(mlinks); 
			var force = vis.add(pv.Layout.Force)
               .nodes(renderImage.nodes)
               .links(renderImage.links);	
            

			
            force.link.add(pv.Line);
			
            force.node.add(pv.Dot)
                .size(function(d) (d.linkDegree + 14) * Math.pow(this.scale, -1.5))
                .fillStyle(function(d) d.fix ? "plum" : colors(d.group))
                .strokeStyle(function() this.fillStyle().darker())
                .lineWidth(20)
                .title(function(d) d.name)
                .event("mousedown", pv.Behavior.drag())
                .event("drag", force);
			//console.log(renderImage.nodes);
			//console.log(renderImage.links);
			//console.log("render");
			vis.render();	

			var newOne = document.getElementById("canvasDraw");
			$("<div id='notes'> </br></br><span style='color:#1805E8'>Chú thích:</span></br><span style='color:#1805E8'>Màu xanh dương: chủ nhân của Facebook này</span></br><span style='color:#E80505'>Màu đỏ: Những nhóm trên facebook mà bạn của bạn tham gia</span></br><span style='color:#05E81F'>Màu xanh la cay và màu vàng nghệ: người bạn cụ thể và bạn của người đó</span></div>").insertAfter(newOne);
        }

		function renderImageFirst(mnodes, mlinks){

        	var oldOne = document.getElementById("canvasDraw");
        	if(oldOne != null) 
        		oldOne.remove();
        	var oldNotes = document.getElementById("notes");
        	if(oldNotes != null) 
        		oldNotes.remove();
            var w = 600,
            h = 600,
            colors = pv.Colors.category19();

            var vis = new pv.Panel()
                .width(w)
                .height(h)
                .fillStyle("white")
                .event("mousedown", pv.Behavior.pan())
                .event("mousewheel", pv.Behavior.zoom());
			//next time render
            
			var force = vis.add(pv.Layout.Force)
                .nodes(mnodes)
                .links(mlinks);

			
            force.link.add(pv.Line);
			
            force.node.add(pv.Dot)
                .size(function(d) (d.linkDegree + 14) * Math.pow(this.scale, -1.5))
                .fillStyle(function(d) d.fix ? "plum" : colors(d.group))
                .strokeStyle(function() this.fillStyle().darker())
                .lineWidth(20)
                .title(function(d) d.name)
                .event("mousedown", pv.Behavior.drag())
                .event("drag", force);
			//console.log(renderImage.nodes);
			//console.log(renderImage.links);
			//console.log("render");
			vis.render();	

			var newOne = document.getElementById("canvasDraw");
			$("<div id='notes'> </br></br><span style='color:#1805E8'>Chú thích:</span></br><span style='color:#1805E8'>Màu xanh dương: chủ nhân của Facebook này</span></br><span style='color:#E80505'>Màu đỏ: Những nhóm trên facebook mà bạn của bạn tham gia</span></br><span style='color:#05E81F'>Màu xanh la cay và màu vàng nghệ: người bạn cụ thể và bạn của người đó</span></div>").insertAfter(newOne);
        }
		//static variables
		renderImage.privacyValue = "<?php echo $_SESSION["privacyValue"]?>";
		renderImage.nodes = onloadNodes;
		renderImage.links = onloadLinks;

		function renderImageDeleteSelf(node){
			var oldOne = document.getElementById("canvasDraw");
        	if(oldOne != null) 
        		oldOne.remove();


        	var oldNotes = document.getElementById("notes");
        	if(oldNotes != null) 
        		oldNotes.remove();
            var w = 600,
            h = 600,
            colors = pv.Colors.category19();

            var vis = new pv.Panel()
                .width(w)
                .height(h)
                .fillStyle("white")
                .event("mousedown", pv.Behavior.pan())
                .event("mousewheel", pv.Behavior.zoom());

			console.log(renderImage.nodes);
			console.log(node);
			$nodeToRemove = -1;
			for($i=0; $i<renderImage.nodes.length; $i++){
				if(renderImage.nodes[$i].id == node.id){
					renderImage.nodes.splice($i, 1);
					$nodeToRemove = $i;
				}
			}
			for($j=0; $j<renderImage.links.length; $j++){
				if(renderImage.links[$j].source == $nodeToRemove)
					renderImage.links.splice($j, 1);
			}
			
			var force = vis.add(pv.Layout.Force)
                .nodes(renderImage.nodes)
                .links(renderImage.links);

			force.link.add(pv.Line);
			
            force.node.add(pv.Dot)
                .size(function(d) (d.linkDegree + 14) * Math.pow(this.scale, -1.5))
                .fillStyle(function(d) d.fix ? "plum" : colors(d.group))
                .strokeStyle(function() this.fillStyle().darker())
                .lineWidth(20)
                .title(function(d) d.name)
                .event("mousedown", pv.Behavior.drag())
                .event("drag", force);
			//console.log(renderImage.nodes);
			//console.log(renderImage.links);
			//console.log("render");
			vis.render();	

			var newOne = document.getElementById("canvasDraw");
			$("<div id='notes'> </br></br><span style='color:#1805E8'>Chú thích:</span></br><span style='color:#1805E8'>Màu xanh dương: chủ nhân của Facebook này</span></br><span style='color:#E80505'>Màu đỏ: Những nhóm trên facebook mà bạn của bạn tham gia</span></br><span style='color:#05E81F'>Màu xanh la cay và màu vàng nghệ: người bạn cụ thể và bạn của người đó</span></div>").insertAfter(newOne);
		}

		function renderImageDeleteFriendsAndPublic(node){
			var oldOne = document.getElementById("canvasDraw");
        	if(oldOne != null) 
        		oldOne.remove();

        	var oldNotes = document.getElementById("notes");
        	if(oldNotes != null) 
        		oldNotes.remove();

            var w = 600,
            h = 600,
            colors = pv.Colors.category19();

            var vis = new pv.Panel()
                .width(w)
                .height(h)
                .fillStyle("white")
                .event("mousedown", pv.Behavior.pan())
                .event("mousewheel", pv.Behavior.zoom());

			// console.log(renderImage.links);
			// console.log(renderImage.nodes);
			$nodeToRemove1 = -1;
			$nodeToRemove2 = -1;
			for($i=0; $i<renderImage.nodes.length; $i++){
				if(renderImage.nodes[$i].name == node.name){
					$nodeToRemove1 = $i;
					renderImage.nodes.splice($nodeToRemove1, 1);
					renderImage.nodes.splice($nodeToRemove1, 1);
					//remove 2 lan vi thay doi so stt sau lan remove dau
					break;
				}
			}
			// console.log($nodeToRemove1);
			// console.log($nodeToRemove2);
			for($j=0; $j<renderImage.links.length; $j++){
				if((renderImage.links[$j].source == $nodeToRemove1)){
					renderImage.links.splice($j, 1);
					renderImage.links.splice($j, 1);
				}
			}
			
			
			var force = vis.add(pv.Layout.Force)
                .nodes(renderImage.nodes)
                .links(renderImage.links);

			force.link.add(pv.Line);
			
            force.node.add(pv.Dot)
                .size(function(d) (d.linkDegree + 14) * Math.pow(this.scale, -1.5))
                .fillStyle(function(d) d.fix ? "plum" : colors(d.group))
                .strokeStyle(function() this.fillStyle().darker())
                .lineWidth(20)
                .title(function(d) d.name)
                .event("mousedown", pv.Behavior.drag())
                .event("drag", force);
			//console.log(renderImage.nodes);
			//console.log(renderImage.links);
			//console.log("render");
			vis.render();	


			var newOne = document.getElementById("canvasDraw");
			$("<div id='notes'> </br></br><span style='color:#1805E8'>Chú thích:</span></br><span style='color:#1805E8'>Màu xanh dương: chủ nhân của Facebook này</span></br><span style='color:#E80505'>Màu đỏ: Những nhóm trên facebook mà bạn của bạn tham gia</span></br><span style='color:#05E81F'>Màu xanh la cay và màu vàng nghệ: người bạn cụ thể và bạn của người đó</span></div>").insertAfter(newOne);
		}


		function renderImageDeleteFriendsOfTagged(node){
			var oldOne = document.getElementById("canvasDraw");
        	if(oldOne != null) 
        		oldOne.remove();

        	var oldNotes = document.getElementById("notes");
        	if(oldNotes != null) 
        		oldNotes.remove();

            var w = 600,
            h = 600,
            colors = pv.Colors.category19();

            var vis = new pv.Panel()
                .width(w)
                .height(h)
                .fillStyle("white")
                .event("mousedown", pv.Behavior.pan())
                .event("mousewheel", pv.Behavior.zoom());

			console.log(renderImage.links);
			$nodeToRemove1 = -1;
			for($i=0; $i<renderImage.nodes.length; $i++){
				if(renderImage.nodes[$i].name == node.name){
					$nodeToRemove1 = $i;
					renderImage.nodes.splice($nodeToRemove1, 1);
					//remove 2 lan vi thay doi so stt sau lan remove dau
					break;
				}
			}
			console.log($nodeToRemove1);
			for($j=0; $j<renderImage.links.length; $j++){
				if((renderImage.links[$j].source == $nodeToRemove1)){
					renderImage.links.splice($j, 1);
				}
			}
			
			
			var force = vis.add(pv.Layout.Force)
                .nodes(renderImage.nodes)
                .links(renderImage.links);

			force.link.add(pv.Line);
			
            force.node.add(pv.Dot)
                .size(function(d) (d.linkDegree + 14) * Math.pow(this.scale, -1.5))
                .fillStyle(function(d) d.fix ? "plum" : colors(d.group))
                .strokeStyle(function() this.fillStyle().darker())
                .lineWidth(20)
                .title(function(d) d.name)
                .event("mousedown", pv.Behavior.drag())
                .event("drag", force);
			//console.log(renderImage.nodes);
			//console.log(renderImage.links);
			//console.log("render");
			vis.render();	

			var newOne = document.getElementById("canvasDraw");
			$("<div id='notes'> </br></br><span style='color:#1805E8'>Chú thích:</span></br><span style='color:#1805E8'>Màu xanh dương: chủ nhân của Facebook này</span></br><span style='color:#E80505'>Màu đỏ: Những nhóm trên facebook mà bạn của bạn tham gia</span></br><span style='color:#05E81F'>Màu xanh la cay và màu vàng nghệ: người bạn cụ thể và bạn của người đó</span></div>").insertAfter(newOne);
		}
	</script>
		
</body>
</html>
